﻿@using FlowBasisSampleSite.Domain.Entities
@{
    ViewBag.Title = "User Accounts";

    List<UserAccount> userAccounts = ViewBag.UserAccounts;
}

<h2>User Accounts</h2>

<div id='query-div'>
    <input data-json-input-name='matchText' type="text" style='width: 250px' />
    <br />
    <input data-json-input-name='includeDeleted' type="checkbox" /> Include Deleted
</div>

<div id='user-pager'></div>
<div id='user-list'></div>

<script type="text/javascript">//<!--
    
    var userResultSet = new FlowBasis.Data.RemoteResultSet({
        url: "~/Admin/UserAccounts/GetUserList",
        query: {},

        maxResultsPerRequest: 100
    });       

    var resultSetList = new FlowBasis.Data.ResultSetList({
        container: "#user-list",
        resultSet: userResultSet,

        paging: {
            resultsPerPage: 20
        },

        itemConverter: function (item) {
            var listItem = jQuery("<li>");

            listItem.append(
                jQuery("<a>")
                    .attr({ href: FlowBasis.resolveUrl("~/Admin/UserAccounts/Info") + "/" + item.id })
                    .text(item.displayName)
            );

            if (item.primaryEmail) {
                listItem.append(" - " + item.primaryEmail);
            }

            if (item.isDeleted) {
                listItem.append(" (DELETED)");
            }

            return listItem;
        }
    });

    var resultSetPager = new FlowBasis.Data.ResultSetPager({
        container: "#user-pager",
        resultSetList: resultSetList,
        hideIfOnlyOnePage: true
    });

    var queryInput = new FlowBasis.UI.JsonForm({ container: "#query-div" });

    function searchUsers() {
        var newQuery = queryInput.getInputData();
        userResultSet.updateQuery(newQuery);
    }

    var debouncedSearchUsers = _.debounce(searchUsers, 300);

    jQuery(queryInput).bind("inputDataChanged", function () {
        debouncedSearchUsers();
    });

//--></script>